<template>
	<el-dialog
		:title="info.title"
		:width="info.width"
		:top="info.top"
		:visible.sync="dialogFormVisible"
		@close="oncloseDialog"
		destroy-on-close
		:close-on-click-modal="false"
		@before-close="onbeforeEvent"
	>
		<el-row>
			<el-col :span="24 - info.col">
				<v-form
					v-for="(item,i) in formList"
					:key="i"
					:formList="item.list"
					:title="item.title"
					:outofSubmit="true"
					:ref="`formData_${i}`"
					@change="change"
					:isDisabled="isDisabled"
				></v-form>
			</el-col>
			<el-col :span="info.col">
				<slot></slot>
			</el-col>
		</el-row>
		<div v-if="!isDisabled" slot="footer" class="dialog-footer">
			<el-button @click="closeDialog">取 消</el-button>
			<el-button type="primary" @click="submitBtn">确 定</el-button>
		</div>
		<div v-else slot="footer" class="dialog-footer">
			<el-button @click="closeDialog">关 闭</el-button>
		</div>
	</el-dialog>
</template>

<script>
import VForm from "@/components/luyiming/VueEleForm/index.vue";
export default {
	components: {
		VForm
	},
	props: {
		info: {
			type: Object,
			default: {
				title: "",
				width: "",
				top: "",
				col: 0
			}
		},
		formList: {
			type: Array,
			default: []
		},
		isDisabled: {
			type: Boolean,
			default: false
		}
	},
	data(){
		return {
			dialogFormVisible: false,
		}
	},
	methods: {
		closeDialog(){
			this.dialogFormVisible = false;
		},
		openDialog(){
			this.dialogFormVisible = true;
		},
		oncloseDialog(){
			this.$emit("onClose")
			this.$emit("close")
			this.getFormEle().forEach(item => {
				item[0].clearForm();
			});
		},
		submitBtn(){
			this.$confirm('确认要提交吗？')
				.then(_ => {
					this.submit()
				})
				.catch(_ => {});
		},
		async submit() {
			let formData = {},
				conditionList = [];
			let i = 0;
			let omData = this.$refs[`formData_${i}`]
			while( omData ){
				formData = { ...omData[0].getFormData(), ...formData };
				omData = this.$refs[`formData_${i}`]
				i ++;
			}
			let isGo = true;
			await Promise.all(this.getFormEle().map(async item => {
				return await new Promise((res, rej) => {
					item[0].validate((type) => {
						if(!type) isGo = false;
						res()
					});
				})
			}));
			if(!isGo){
				return
			}
			// 循环多个表单，组成一个值
			// for (const v of this.$refs.formData) {
				// formData = { ...v.form, ...formData };
			// }
			console.log('formDataqqqqqqqqqqqqq',formData);

			// 循环表单寻找相同数据的
			for (const key in formData) {
				if (key.indexOf("_") != -1) {
					// 切割字符串，第一个为需要的key
					const anKey = key.split("_")[0];
					let obj = {};
					obj[anKey] = formData[key];
					// 归类用的字段
					obj["index"] = key.split("_")[1];
					conditionList.push(obj);
					// 删除不需要的属性
					delete formData[key];
				}
			}
			if (conditionList.length === 0) {
				this.$emit("submit", formData);
			} else {
				var nameContainer = []; // 针对键index进行归类的容器
				conditionList.forEach(item => {
					item.index = Number(item.index);
					nameContainer[item.index] = nameContainer[item.index] || {};

					//当逻辑或||时，找到为true的分项就停止处理，并返回该分项的值，否则执行完，并返回最后分项的值。
					nameContainer[item.index][Object.keys(item)[0]] =
						item[Object.keys(item)[0]];
				});
				formData["conditionList"] = nameContainer.filter(item => item);
				this.$emit("submit", formData);
			}
		},
		change(...params){
			this.$emit("change", ...params)
		},
		// clearForm() {
		// 	let i = 0;
		// 	let omData = this.$refs[`formData_${i}`]
		// 	let result = []
		// 	while( omData ){
		// 		result.push(omData)
		// 		i ++;
		// 		omData = this.$refs[`formData_${i}`]
		// 	}
		// 	return result
		// },
		getFormEle(){
			let i = 0;
			let omData = this.$refs[`formData_${i}`]
			let result = []
			while( omData ){
				result.push(omData)
				i ++;
				omData = this.$refs[`formData_${i}`]
			}
			return result
		},
		onbeforeEvent(done){
			this.$confirm('确认关闭？关闭后填写的内容将会丢失')
				.then(_ => {
					done();
				})
				.catch(_ => {});
		}
	}
};
</script>

<style lang="scss" scoped></style>
